import 'package:flutter/material.dart';
import 'package:flutter_oldman_health/chart/flutter_echarts.dart';

class BarChartWidget extends StatefulWidget {
  int healthType = 0;
  int dateType = 0;
  List dataX = ['"2012"', '"2013"', '"2014"', '"2015"', '"2016"'];
  List<List<String>> legendData = [];

  @override
  State<StatefulWidget> createState() {
    return BarChartWidgetState();
  }

  BarChartWidget(this.dateType, this.healthType, this.dataX, this.legendData);
}

class BarChartWidgetState extends State<BarChartWidget> {
  List legendName = ['平均', '最高', '最低'];
  List listData = ["血氧", "心率", "体温", "计步"];
  String unit = "";
  Size screenSize;

  setHealthType(int healthType) {
    setState(() {
      widget.healthType = healthType;
    });
  }

  @override
  void initState() {
    if (widget.healthType == 0) {
      unit = "%";
    } else if (widget.healthType == 1) {
      unit = "次/分";
    } else if (widget.healthType == 2) {
      unit = "°C";
    } else {
      unit = "步";
    }

    super.initState();
    // legendName = [
    //   '平均${widget.healthType}',
    //   '最高${widget.healthType}',
    //   '最低${widget.healthType}'
    // ];
  }

  @override
  Widget build(BuildContext context) {
    screenSize = MediaQuery.of(context).size;

    return Container(
        width: screenSize.width,
        height: 540,
        padding: EdgeInsets.only(top: 10),
        child: _getBarCharts());
  }

  //  legend: {
  //   data: ['平均${widget.healthType}', '最高${widget.healthType}', '最低${widget.healthType}']
  // },
  Widget _getBarCharts() {
    return Echarts(reloadAfterInit: true, extraScript: '''
const labelOption = {
  show: true,
  position: 'insideBottom',
  distance: 15,
  align: 'left',
  verticalAlign: 'middle',
  rotate: 90,
  formatter: '{c}  {name|{a}}',
  fontSize: 15,
  rich: {
    name: {}
  }
};
    ''', option: '''
    {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
   legend: {
    data: ['平均', '最高', '最低']
  },

  toolbox: {
    show: true,
    orient: 'vertical',
    left: 'right',
    top: 'center',
    feature: {
      mark: { show: true },
      // dataView: { show: true, readOnly: false },
      magicType: { show: true, type: ['line', 'bar', 'stack'] },
      restore: { show: true },
      //saveAsImage: { show: true }
    }
  },
  xAxis: [
    {
      type: 'category',
      axisTick: { show: false },
      data: ${widget.dataX}
    }
  ],
  yAxis: [
    { 
      name:'${listData[widget.healthType]} $unit',
      type: 'value',
      // axisLabel:{ formatter:'{value}$unit'}
    }
  ],
  series: [
    {
      name: '${legendName[0]}',
      type: 'bar',
      barGap: 0,
      label: labelOption,
      barWidth: '20%',
      emphasis: {
        focus: 'series'
      },
      data: ${widget.legendData[0]}
    },
    {
      name: '${legendName[1]}',
      type: 'bar',
      label: labelOption,
      barWidth: '20%',
      emphasis: {
        focus: 'series'
      },
      data: ${widget.legendData[1]}
    },
    {
      name: '${legendName[2]}',
      type: 'bar',
      label: labelOption,
      barWidth: '20%',
      emphasis: {
        focus: 'series'
      },
      data: ${widget.legendData[2]}
    }
  ]
}
 ''');
  }



  Widget getEasyBarCharts(List<String> dateList, List<String> valueList) {
    return Echarts(reloadAfterInit: true, option: '''
    {
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'shadow'
    }
  },
 grid: {
        left: '3%',
        right: '3%',
        height: '85%',
        containLabel: true,
        z: 22,
      },
  xAxis: [
    {
      type: 'category',
      data: $dateList,
      axisTick: {
        alignWithLabel: true
      }
    }
  ],
  yAxis: [
    {
      type: 'value',
      axisLabel:{
      formatter:'{value}$unit'}
    }
  ],
  series: [
    {
      name: '${listData[2]}',
      type: 'bar',
      barWidth: '20%',
      label:{
        show:true,
        position:'top'
      },
      data: $valueList
    }
  ]
}''');
  }



  Widget _getLineCharts(List<int> dateList, List<double> valueList) {
    return Echarts(
      captureAllGestures: true,
      extraScript: '''
                    var date1 = $dateList;
                    var data = $valueList;
                    var date = []; 
                    
                    for (var i = 1; i < data.length; i++) {
                        var now = new Date(date1[i]);
                        date.push([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                        console.log([now.getFullYear(), now.getMonth() + 1, now.getDate()].join('/'));
                    }
                  ''',
      option: '''
                    {
                    grid: {
                        left: '3%',
                        right: '10%',
                        bottom: '0%',
                        top: '2%',
                        height: '85%',
                        containLabel: true,
                        z: 22,
                      },
                      tooltip: {
                          trigger: 'axis',
                          position: function (pt) {
                              return [pt[0], '20%'];
                          }
                      },
                      // toolbox: {
                      //     feature: {
                      //         dataZoom: {
                      //             yAxisIndex: 'none'
                      //         },
                      //         restore: {},
                      //         saveAsImage: {}
                      //     }
                      // },
                      xAxis: {
                          type: 'category',
                          boundaryGap: false,
                          data: date
                      },
                      yAxis: {
                          type: 'value',
                          boundaryGap: [0, '10%']
                      },
                      dataZoom: [{
                          type: 'inside',
                          start: 0,
                          end: 80
                      }, {
                          start: 0,
                          end: 30,
                          handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
                          handleSize: '80%',
                          handleStyle: {
                              color: '#fff',
                              shadowBlur: 3,
                              shadowColor: 'rgba(0, 0, 0, 0.6)',
                              shadowOffsetX: 2,
                              shadowOffsetY: 2
                          }
                      }],
                      series: [
                          {
                              name: 'data',
                              type: 'line',
                              smooth: true,
                              symbol: 'none',
                              sampling: 'average',
                              itemStyle: {
                                  color: 'rgb(255, 70, 131)'
                              },
                              areaStyle: {
                                  color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                      offset: 0,
                                      color: 'rgb(255, 158, 68)'
                                  }, {
                                      offset: 1,
                                      color: 'rgb(255, 70, 131)'
                                  }])
                              },
                              data: data
                          }
                      ]
                    }
                  ''',
    );
  }

}
